<template>
  <div class="container">
    <div class="bg"></div>
    <div class="header">
      <!-- 图标 -->
      <div class="logo">
        <img src="@/assets/images_login/logo.png" alt="logo">
      </div>
    </div>
    <main class="main">
       <!-- 文本 -->
      <div class="main-content">
        <div class="title">中恒e纺，全新升级上线</div>
        <div class="sub-title">
          <ul>
            <li>
              <div class="imgBox">
                <img src="@/assets/images_login/bg_icon.png" alt="bg_icon">
              </div>
              智慧纺织
            </li>
            <li>
              <div class="imgBox">
                <img src="@/assets/images_login/bg_icon.png" alt="bg_icon">
              </div>
              实力央企
            </li>
            <li>
              <div class="imgBox">
              <img src="@/assets/images_login/bg_icon.png" alt="bg_icon">
              </div>
              优质服务
            </li>
          </ul>
        </div>
      </div>
      <slot name="form">
        这是一个给表单用的插槽
      </slot>

    </main>
    <!--  底部  -->
    <div class="footer">
      <span>中恒纺织交易市场（广东）有限公司   粤ICP备19042832号-1</span>
    </div>
  </div>
</template>

<script>
export default {
  name:'LoginMain'
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  font-size: .16rem;
  height: 100vh;
}

.imgBox{
  img{
    -webkit-user-drag:none;
    // user-select: none;
    cursor: default;
  }
}

//!背景样式
.bg{
  width: 100vw;
  height: 100vh;
  z-index: -999;
  background-image: url("~@/assets/images_login/bg_pic.png");
  background-size: cover;
  position:fixed;
}

//!页头样式
.header{
  flex-basis: 2.1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  .logo{
    vertical-align: middle;
    margin-left: .4rem;
  }
}





//!主体样式
.main{
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 11.69rem;
  // margin: 0 4rem;
  align-items: flex-start;
  flex-wrap:wrap;
  flex-grow:1;
  margin-bottom: .3rem;



  .main-content{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 4.7rem;
    width: 4.7rem;
    margin-bottom: .3rem;
    margin-right: 1.95rem;
    margin-top: 1.5rem;



    .title{
      color: #fff;
      font-size: .38rem;
      letter-spacing: 0.048rem;
    }
    .sub-title{
      color: #fff;
      font-size: .18rem;
      margin-top: .4rem;
      ul{
        display: flex;
        list-style: none;
        padding:0;
        margin: 0;
      }
      ul li{
        display: flex;
        align-items: center;
        margin-right: .18rem;
      }
      ul li img{
        margin-right: .05rem;
        display: flex;
        align-items: center;
        vertical-align: middle;
      }
    }
  }
}

//!页脚样式
.footer{
  // margin-top: .6rem;
  margin-left: .4rem;
  margin-bottom: .7rem;
  color: #FFFFFF;
  opacity: 0.35;
  font-size: .12rem;
}

//!表单样式
//!表单样式
::v-deep .form {
  margin-right: 0;
  width: 4.87rem;
  min-width: 4.87rem;
  // height: 5.43rem;
  border-radius: .1rem;
  background: #ffffff;
  padding:0 .6rem;
  padding-bottom: .5rem;

  .success{
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;

    &-imgBox{
      margin-top: .65rem;

    }

    &-title{
      margin-top: .3rem;
      font-size: .4rem;
      font-weight: 400;
    }

    &-content{
      text-align: center;
      line-height: .3rem;
      color: #363636;
      margin-top: .52rem;
      font-size: .2rem;
      span{
        color: red;
      }
    }

    &-btn{
      margin-top: .3rem;
      width: 100%;
      height: .58rem;
      line-height: .58rem;
      text-align: center;
      background-color: #2D9D0B;
      border:none;
      outline:none;
      border-radius: .1rem;
      font-size: .18rem;
      color: #fff;
      cursor: pointer;
    }
  }

  .title {
    margin-top: .6rem;
    color: #17264A;
    font-size: .4rem;
  }

  .register{
    margin-top: .25rem;
    font-size: .16rem;
    .content{
      color: #777777 ;
    }
    .btn{
      color: #C69766;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      img{
        margin-left: .03rem;
      }
    }
  }

  .input{
    margin-top: .48rem;

    .error-message{
      color: #E41616;
      font-size: .12rem;
      line-height: 1;
      padding-top: .04rem;
      position:absolute;
      top:100%;
      right:0;
    }

    .input-box{
      position:relative;
      input{
        width: 100%;
        height: .55rem;
        line-height: .55rem;
        outline:none;
        border:.01rem solid #E5E5E5;
        border-radius: .1rem;
        padding-left:.6rem;
        padding-right:.4rem;
        padding-top: .05rem;
        font-size: .18rem;
        color: #333 ;
        &::placeholder{
          font-size: .18rem;
          color: #B4B3B3;
        }

        &:focus{
          border:.02rem solid #C69766;
          // background-color: #FFFAF4!important;
        }

        //防止自动填充账号密码时，给input上背景色
        &:-webkit-autofill{
          -webkit-box-shadow:0 0 0rem 10rem #fff inset;
          // -webkit-text-fill-color: #333;
        }
      }


      .input-icon{
        position:absolute;
        margin-left: .18rem;
        font-size: .24rem;

        left:0;
        top:50%;
        transform:translateY(-50%);

      }

      .input-icon-suffix{
        position:absolute;
        margin-right: .18rem;
        right: 0;
        top:50%;
        transform:translateY(-50%);
        cursor: pointer;
      }

    }



  }
  .formBtn{
    width: 100%;
    font-size: .18rem;
    margin-top: .3rem;
    height: .55rem;
    text-align: center;
    border:none;
    border-radius: .1rem;
    background-color: #DDC1A3;
    // &:hover{
    //   background-color: #c19765;
    // }
  }

  .protocol{
    margin-top: .2rem;
    text-align: center;
    font-size: .14rem;
    color: #999999;
    .content{
      margin-left: .05rem;
      display: inline;
      // cursor: pointer;
      vertical-align: middle;
      span{
        cursor: pointer;
        color: #DDC1A3;
      }
    }
    input {
      display: none;
    }
    label {
      vertical-align: middle;
      display: inline-block;
      width: .14rem;
      height: .14rem;
      // border-radius: .05rem;
      border: .01rem solid #DDC1A3;
      position: relative;
      cursor: pointer;
    }
    label::before {
      display: inline-block;
      content: " ";
      width: .12rem;
      border: .02rem solid #fff;
      height: .06rem;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      top: .02rem;
      left: .01rem;
      position: absolute;
      opacity: 0;
    }
    input:checked+label {
      background: #c19765;
    }
    input:checked+label::before{
      opacity: 1;
      transform: all 0.5s;
    }

  }
}


</style>
